//flex布局
@mixin flex($direction: row) {
  display: flex;
  flex-direction: $direction;
}

//主题按钮
@mixin primaryButton {
  background-color: var(--color-theme);
  color: var(--vt-c-white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: var(--color-theme-mute);
  }
}

//自定义按钮
@mixin customButton($color: var(--color-theme)) {
  background-color: $color;
  color: var(--vt-c-white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken($color, 10%);
  }
}

//主题线框按钮
@mixin primaryButtonOutline {
  background-color: transparent;
  color: var(--color-theme);
  border: 2px solid var(--color-theme);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;

  &:hover {
    background-color: var(--color-background-mute);
    // color: var(--color-text);
  }
}

//自定义线框按钮
@mixin customButtonOutline($color: var(--color-theme)) {
  background-color: transparent;
  color: $color;
  border: 2px solid $color;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;

  &:hover {
    background-color: $color;
    color: var(--vt-c-white);
  }
}

//主题输入框
@mixin primaryInput {
  background-color: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
  outline: none;
  border-radius: 5px;
  transition: border-color 0.3s ease;

  &::selection {
    background-color: var(--color-theme-soft);
  }

  &:focus {
    border-color: var(--color-theme);
  }
}

//自定义滚动条
@mixin customScrollbar($width: 8px) {
  overflow-y: overlay;

  &::-webkit-scrollbar {
    width: $width;
    background-color: var(--color-border);
    border-radius: $width;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--color-theme);
    border-radius: $width;
  }
}

//隐藏滚动条
@mixin hiddenScrollbar() {
  &::-webkit-scrollbar {
    display: none;
  }
}
